import React, { useRef, forwardRef, useImperativeHandle } from "react";
// 在父组件里面拿到子组件的dom元素

// forwardRef是用来传递ref的值
const Child = forwardRef((props, ref) => {
  const child = useRef(null);
  useImperativeHandle(ref, () => child.current);
  return <div ref={child}>child组件</div>;
});

const App = () => {
  const child = useRef();

  const fn = () => {
    console.log(child);
  };

  return (
    <>
      <h2>useImperativeHandle</h2>
      <button onClick={fn}>btn</button>
      <Child ref={child} />
    </>
  );
};

export default App;
